﻿@{
    ViewBag.Title = "CarritoCompras";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    List<PerfectBuyData.CarritoArticulo> carrito = (List<PerfectBuyData.CarritoArticulo>)Session["carrito"];
    decimal subtotal = 0;
}
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    function eliminar(id) {
        $.ajax({
            url: "/CarritoCompras/Eliminar?idArticulo=" + id,
            success: function (data) {
                location.reload();
            }
        });
    }

    function editar(id, textBox) {
        var cantidad = textBox.value;
        var regEx = /\d+/;
        if (!cantidad.match(regEx)) {
            return false;
        }
        if (cantidad == 0) {
            return false;
        }
        $.ajax({
            url: "/CarritoCompras/Editar?idArticulo=" + id + "&cantidad=" + cantidad,
            success: function (data) {
                if (data.length > 0) {
                    alert(data);
                } else {
                    location.reload();
                }
            }
        });
    }

    function mostrar(textBox) {
        textBox.style["visibility"] = "visible";
        textBox.style["border-color"] = "#0058B0";
    }
</script>
<article id="basket">
    <h1>Carrito de Compras</h1>
    <span>@(ViewBag.Message)</span>
    <table width="100" border="1">
        <tr>
            <th scope="col" class="description">Producto</th>
            <th scope="col" class="options">Opciones</th>
            <th align="right" scope="col" class="price">Precio</th>
            <th scope="col" align="right" class="Price">Sub-Total</th>
        </tr>
        @{
            if (carrito.Count == 0)
            {
            <tr>
                <td colspan="4">El carrito no tiene articulos</td>
            </tr>
            }
        }
        @foreach (PerfectBuyData.CarritoArticulo articulo in carrito)
        {
            decimal cantidad = articulo.cantidad;
            string urlImagen = articulo.Articulo.urlImagen;
            
            <tr>
                <td align="left" valign="top" class="description">
                    <img src="@urlImagen" alt="imagen articulo" class="left" /><p><a href=@Url.Action("DetalleArticulo", "Home", new { idArticulo = @articulo.Articulo.id })>@articulo.Articulo.nombre</a></p>
                    <a href="#" onclick="eliminar(@articulo.Articulo.id)">Eliminar</a></td>
                <td align="left" valign="top" class="options">
                    <dl>
                        <dt>ID articulo</dt>
                        <dd>@articulo.Articulo.id</dd>
                        <dt>Cantidad:</dt>
                        <dd>@cantidad</dd>
                        <dd>
                            <input onchange="editar(@articulo.Articulo.id, this)" type="text" id="txt_@articulo.Articulo.id" style="visibility:hidden"/></dd>
                    </dl>
                    <button onclick="mostrar(txt_@articulo.Articulo.id);">Cambiar cantidad</button>
                </td>
                <td align="right" valign="top" class="price">$@articulo.Articulo.precio</td>
                <td align="right" valign="top" class="price">$@(articulo.Articulo.precio * cantidad)</td>
            </tr>
            subtotal += (articulo.Articulo.precio * cantidad);
        }
    </table>
    <img src="../../Images/creditcards.gif" class="safe" />
    <div class="right">
        <strong>Subtotal antes de cargos de envío</strong> <em>$@subtotal</em><br />
        <p>
            <select>
                <option>Entrega gratis (3-5 días)</option>
            </select>
            <em>$0.00</em>
        </p>
        <strong>Total</strong> <em>$@subtotal</em>
    </div>
    @using (Html.BeginForm("Pagar", "CarritoCompras"))
    {
        <input type="hidden" name="total" value="@subtotal" />
        if (@subtotal != 0)
        {
        <button class="continue">Comprar Ahora</button>
        }
        else
        {
        <button class="continue" disabled="disabled">Comprar Ahora</button>
        }

    }
</article>
